<template>
	<view class="cate-container">
		<!-- 搜索栏 -->
		<view class="search-container">
			<input type="text" placeholder="请输入搜索内容" class="search-input" />
		</view>

		<view class="cate-content">
			<!-- 左侧一级分类 -->
			<view class="cate-left">
				<view v-for="(item, index) in categories" :key="index"
					:class="['cate-item', { 'active': currentCategory === index }]" @tap="selectCategory(index)"
					@click="getbrandList(item)">
					{{ item}}
				</view>
			</view>

			<!-- 右侧内容区 -->
			<view class="cate-right">
				<!-- 品牌区域 -->
				<view class="brand-container">
					<text class="section-title">品牌</text>
					<view class="brand-list">
						<view v-for="(item, index) in brandList" :key="index" :class="'brand-item'"
							@tap="selectBrand(item.brand)">
							{{ item.brand }}
						</view>
					</view>
				</view>

				<!-- 商品列表 -->
				<view class="product-container">
					<text class="section-title">商品列表</text>
					<view class="product-list">
						<view v-for="(product, index) in productList" :key="index" class="product-item" @click="goDeteails(product.proid)">
							<view class="product-image">
								<image :src="product.img1" mode="aspectFill"></image>
							</view>
							<view class="product-info">
								<text class="product-name">{{ product.proname }}</text>
								<text class="product-price">¥{{ product.originprice }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	//获取商品分类数据
	let categories = ref([]);

	function getcateList() {
		uni.request({
			url: 'http://47.94.6.186:3001/api/pro/categorylist',
			method: 'GET'
		}).then(res => {
			categories.value = res.data.data;
			console.log(categories);
		})
	}
	getcateList();

	//分类下的品牌名
	let brandList = ref([]);
	//分类获取
	let cateB = ref([]);
	//获取分类下的品牌名
	function getbrandList(cate) {
		cateB.value = cate;
		uni.request({
			url: 'http://47.94.6.186:3001/api/pro/categorybrandlist',
			method: 'GET',
			data: {
				category: cate
			}
		}).then(res => {
			brandList.value = res.data.data;
			console.log(brandList.value);
		})
	}

	//产品列表
	let productList = ref([]);
	// 某品牌的产品列表
	function selectBrand(brand) {
		uni.request({
			url: 'http://47.94.6.186:3001/api/pro/categorybrandprolist',
			method: 'GET',
			data: {
				count: 1,
				limitNum: 10,
				category: cateB.value,
				brand: brand
			}
		}).then(res => {
			productList.value = res.data.data;
			console.log(productList);
		})
	}
	
	//前往详情页方法
	function goDeteails(id) {
		console.log(id);
		uni.navigateTo({
			url: `/pages/details/details?productid=${id}`
		})
	}
</script>

<style>
	/* 添加搜索栏样式 */
	.search-container {
		padding: 20rpx;
		background-color: #f8f8f8;
		/* 确保搜索框容器可见 */
		height: 100rpx;
		display: flex;
		align-items: center;
	}

	/* 原生搜索框样式 */
	.search-input {
		width: 100%;
		height: 60rpx;
		background-color: #fff;
		border-radius: 30rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
	}

	.cate-container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.cate-header {
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background-color: #fff;
		border-bottom: 1rpx solid #eee;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.header-title {
		font-size: 36rpx;
		font-weight: bold;
	}

	.cate-content {
		display: flex;
		margin-top: 0rpx;
		height: calc(100vh - 88rpx);
	}

	.cate-left {
		width: 200rpx;
		background-color: #f0f0f0;
		overflow-y: auto;
	}

	.cate-item {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		font-size: 28rpx;
		border-bottom: 1rpx solid #e0e0e0;
	}

	.cate-item.active {
		background-color: #fff;
		color: #e54d42;
		font-weight: bold;
	}

	.cate-right {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
		background-color: #fff;
	}


	.section-title {
		font-size: 30rpx;
		font-weight: bold;
		margin: 20rpx 0;
		color: #333;
	}

	.brand-list {
		display: flex;
		flex-wrap: wrap;
	}

	.brand-item {
		width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		margin: 10rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 26rpx;
	}

	.brand-item.active {
		background-color: #e54d42;
		color: #fff;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.product-image {
		width: 100%;
		height: 300rpx;
		overflow: hidden;
	}

	.product-image image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.product-info {
		padding: 16rpx;
	}

	.product-name {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.product-price {
		color: #e54d42;
		font-size: 30rpx;
		font-weight: bold;
	}
</style>